// window.onload 一定要加!!!
window.addEventListener('load', function () {

    var previewImg = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bigImg = document.querySelector('.bigImg');

    // 1.当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big大盒子
    previewImg.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })

    previewImg.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    /**
     * 2.黄色的遮挡层跟随鼠标功能
     * 把鼠标坐标给遮挡层不合适, 因为遮挡层坐标以父盒子为准
     * 首先获取的鼠标在盒子的坐标, 然后把数值给遮挡层作为 left 和 top 值
     */
    previewImg.addEventListener('mousemove', function (e) {
        // (1) 鼠标在盒子内坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;

        // (2) 减去盒子的高宽的一半, 就是将鼠标指针放置到遮挡层中间
        // (3) 我们 mask 移动的距离
        let maskX = x - mask.offsetWidth / 2;
        let maskY = y - mask.offsetHeight / 2;
        let maskMaxX = this.offsetWidth - mask.offsetWidth;
        let maskMaxY = this.offsetHeight - mask.offsetHeight;
        // (4) 如果 x|y 坐标小于了0 就让它停止0 的位置
        if (maskX <= 0) {
            maskX = 0;
            // (4) 如果 x|y 坐标大于最大移动距离, 将让 x|y 设置为最大的移动距离
            //   最大移动距离: (previewImg小盒子宽度 - 遮挡层宽度)
        } else if (maskX >= maskMaxX) {
            maskX = maskMaxX;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMaxY) {
            maskY = maskMaxY;

        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 3.大图片offset = 遮挡层offset * 大图片max_offset / 遮挡层max_offset
        // 大图片max_offset   big - bigImg -> 得到的是负值, 那么就朝着反方向走
        var bigMaxX = big.offsetWidth - bigImg.offsetWidth;
        var bigMaxY = big.offsetHeight - bigImg.offsetHeight;
        // 大图片offset
        var bigX = maskX * bigMaxX / maskMaxX;
        var bigY = maskY * bigMaxY / maskMaxY;
        bigImg.style.left = bigX + 'px';
        bigImg.style.top = bigY + 'px';
        // console.log(`(${bigX}, ${bigY})`)   //(-298, -24.3265306122449)
    })
})
